<template>
  <el-row>
    <el-col :span="4">
      <el-input></el-input>
    </el-col>
    <el-col :offset="1" :span="2">
      <el-button type="primary">查询</el-button>
    </el-col>
    <el-col :offset="1" :span="2">
      <el-button type="warning">清空</el-button>
    </el-col>
  </el-row>
  <el-row style="margin-top: 10px">
    <el-col :span="2">
      <el-button type="success">添加</el-button>
    </el-col>
    <el-col :offset="1" :span="2">
      <el-button type="danger">批量删除</el-button>
    </el-col>
  </el-row>
  <el-table style="margin-top: 10px;margin-bottom: 10px" height="370px" border :data="userList">
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="index" label="序号" width="80px"></el-table-column>
    <el-table-column label="角色名称" prop="username"></el-table-column>
    <el-table-column label="操作" width="180px">
      <template #default>
        <el-button type="info" size="small">
          <el-icon>
            <Avatar/>
          </el-icon>
        </el-button>
        <el-button type="primary" size="small">
          <el-icon>
            <EditPen/>
          </el-icon>
        </el-button>
        <el-button type="danger" size="small">
          <el-icon>
            <Delete/>
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页器-->
  <el-pagination
      :page-size="10"
      :page-sizes="[3, 5, 10]"
      background
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="100"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  name: "RoleManagement"
}
</script>

<style scoped>

</style>